import * as React from "react";
import { useState, useMemo, useRef } from "react";
import DrawerPro from "@/components/DrawerPro";
import AutoTable from "@/components/AutoTable";
import PremButton from "@/components/PremButton";
import getcolumns from "./columns";
import { useRequest } from "ahooks";
import { doFetch, getFetch } from "@/utils/doFetch";
import { ExportOutlined, ImportOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { Modal, message } from "antd";

function Sensor(props) {
  const formRef = useRef(),
    formRefs = useRef();
  const [drawer, setdrawer] = useState({
    open: false,
  });

  const pathconfig = useMemo(() => {
    let pathconf = getcolumns(setdrawer)?.pathconfig ?? {};
    return pathconf;
  }, []);

  const { run, loading } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res, params) => {
      if (res?.code == "0000") {
        props?.actionRef?.current?.reload();
        setdrawer((s) => ({
          ...s,
          open: false,
        }));
      }
    },
  });

  const edit = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: "small",
          type: "link",
          onClick: () => {
            setdrawer((s) => ({
              ...s,
              open: true,
              item: row,
              title: "编辑",
              val: "edit",
            }));
          },
        }}
      >
        编辑
      </PremButton>
    );
  };

  const remove = (text, row, _, action) => {
    return (
      <PremButton
        pop={{
          title: "是否删除?",
          okText: "确认",
          cancelText: "取消",
          placement: "bottom",
          onConfirm: () => {
            run({
              url: pathconfig?.delete + "/" + row?.id,
              params: {},
              method: "DELETE",
            });
          },
        }}
        btn={{
          size: "small",
          type: "text",
          danger: true,
        }}
      >
        删除
      </PremButton>
    );
  };

  const columns = useMemo(() => {
    let defcolumn = getcolumns(setdrawer)?.columns;
    return defcolumn.concat({
      title: "操作",
      valueType: "option",
      width: 150,
      render: (text, row, _, action) => [
        pathconfig?.enableedit && edit(text, row, _, action),
        pathconfig?.enabledelete && remove(text, row, _, action),
      ],
    });
  }, []);

  return (
    <div style={{ position: "relative", height: "100%", overflowX: "hidden" }}>
      <AutoTable
        pagetitle="供应商库存"
        columns={columns}
        formRef={formRefs}
        dataSource={props?.record?.spare_suppliers}
        extraparams={{
          device_id: props?.record?.id,
        }}
      />

      <DrawerPro
        fields={columns}
        params={{ id: drawer?.item?.id }}
        formRef={formRef}
        placement="right"
        detailpath={pathconfig?.detail || null}
        detailData={drawer?.item}
        defaultFormValue={drawer?.item}
        onClose={() => {
          setdrawer((s) => ({
            ...s,
            open: false,
          }));
        }}
        {...drawer}
        onFinish={(vals) => {
          if (drawer?.val == "edit") {
            run({
              url: pathconfig?.edit + "/" + drawer?.item?.id,
              params: { ...vals, device_id: props?.record?.id },
              method: "PUT",
            });
          }
        }}
      />
    </div>
  );
}

export default Sensor;
